<template>
	<view>
		<topbar :settings="settings"></topbar>
		<view class="content">
			  <view class='register-wrapper'>
			<view class='register-title'>
			      <text class='register-title-textheader'>一起学习吧</text>
			  </view>
			  <view>
			    <view class='register-item' style="margin-top: 50rpx;" :style="{'width':screenWidth}">
			      <text class='register-item-text'>账号</text>
			      <input  v-model="registerInfo.accid" maxlength="20" class='register-item-input' placeholder='限20位字母或数字'></input>
			    </view>
			    <view class='register-item' :style="{'width':screenWidth}">
			      <text class='register-item-text' >昵称</text>
			      <input v-model='registerInfo.name' maxlength="10"  class='register-item-input'  placeholder='限10位汉字、字母或数字'></input>
			    </view>
			    <view class='register-item' :style="{'width':screenWidth}">
			      <text class='register-item-text'>密码</text>
			      <input v-model='registerInfo.token' type='password' maxlength="20" class='register-item-input' placeholder='6~20位字母或数字'></input>
			    </view>
				<view class='register-item' :style="{'width':screenWidth}">
				  <text class='register-item-text'>签名</text>
				  <input v-model='registerInfo.sign'  maxlength="20" class='register-item-input' placeholder='请输入个性签名'></input>
				</view>
				<view class='register-item' :style="{'width':screenWidth}">
				  <text class='register-item-text'>邮箱</text>
				  <input v-model='registerInfo.email' maxlength="20" class='register-item-input' placeholder='请注意邮箱规范'></input>
				</view>
				<view class='register-item' :style="{'width':screenWidth}">
				  <text class='register-item-text'>生日</text>
				  <input v-model='registerInfo.birth' maxlength="20" class='register-item-input' placeholder='例如:20211001'></input>
				</view>
				<view class='register-item' :style="{'width':screenWidth}">
				  <text class='register-item-text'>手机</text>
				  <input v-model='registerInfo.mobile'  maxlength="20" class='register-item-input' placeholder='请输入11位数字'></input>
				</view>
				<view class='register-item' :style="{'width':screenWidth}">
				  <text class='register-item-text'>性别</text>
				  <input v-model='registerInfo.gender'  maxlength="20" class='register-item-input' placeholder='男性请输入0,女性请输入1'></input>
				</view>
				<view class='register-item' :style="{'width':screenWidth}">
				  <text class='register-item-text'>扩展</text>
				  <input v-model='registerInfo.ex' maxlength="20" class='register-item-input' placeholder='更多的展现自己'></input>
				</view>
			    <button form-type='submit'  class='register-submit-btn' @click="Register()" :disabled='allWrite()==true'>注册</button>
			  </view>
			  <text  style="color: #ff0000; font-size:29rpx; ">{{induce}}</text>
			  <text class='register-to-login' @click="gotologin()">已有帐号？直接登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settings:{
					title:"立即注册",
				    backgroundColor:'pink',
				},
				registerInfo:{
					accid:'',
					name:'',
					token:'',
					sign:'',
					email:'',
					birth:'',
					mobile:'',
					gender:0,
					ex:''
				},
				screenWidth:'',
				induce:''
			};
		},
		created() {
			this.getInfo()
		},
		methods:{
			gotologin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			getInfo(){
				uni.getSystemInfo({
					success:(res)=>{
						// console.log(res)
						this.screenWidth = res.screenWidth + 'px'
					}
				})
			},
			// 注册用户
		   async Register(){
			   let data = this.registerInfo
			   let res = await this.$api.Personregister(data);
				console.log(res)
				if(res.code ==0){
					this.gotologin()
					this.induce = ''
					this.$store.dispatch('getuserinfoaccid',res.data.accid)
				}else if(res.code ==10000){
					this.induce = res.msg
				}
			},
			// 判断注册是否填写完整
			allWrite(){
				if(!this.registerInfo.accid||!this.registerInfo.name||!this.registerInfo.token){
					return true
				}else{
				   return false
				}
			}
		}
	}
</script>

<style lang="scss">
.content{
	width: 100%;
	position: absolute;
	top: 800rpx;
}

.register-wrapper {
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: -440rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
}
.register-title {
  display:flex;
  flex-direction:column;
}
.register-title-image {
  width:140rpx;
  height:140rpx;
  margin-bottom:10rpx;
}
.register-title-text {
  color: #aaa;
}
.register-item {
  display: flex;
  flex-direction: row;
  height: 60rpx;
  margin-top: 30rpx;
  border-bottom: 1px solid #e7e7e7; 
  transition: border-bottom 0.5s;
}
.register-item:hover{
	border-bottom: 1px solid #ffaaff; 
}
.register-title-textheader{
	align-self: center;
	margin-right: 20rpx;
	font-size: 80rpx;
	height: 60rpx;
	line-height: 60rpx;
	color: #ffaaff
}
.register-item-text {
  align-self: center;
  margin-right: 50rpx;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
}

.register-item-input {
  border: none;
  width: 80%;
  display: inline-block;
  /* box-sizing: border-box; */
  height: 60rpx;
  font-size: 30rpx;
  /* text-indent: .3em;  */
}

.register-submit-btn {
   color: #fff; 
  vertical-align: middle;
  margin: 30rpx;
  background-color: #1A9BFC;
}

.register-to-login {
  font-size: 32rpx;
}
</style>
